<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge 03</title>
    <link rel="stylesheet" href="../../style.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <header class="nav">
        <a href="/">
          <img src=" /logo.svg" alt="logo" />
        </a>
        <a href="https://jsmastery.com/all-courses" target="_blank"
          >GSAP Course</a
        >
      </header>

      <div class="content">
        <div class="arrow">
          <a href="../../index.html">
            <img src=" /arrow.svg" alt="arrow" />
          </a>
        </div>

        <section>
          <h1>Challenge 03</h1>
          <p>
            You’ve already brought cards onto the screen with smooth entrance
            animations using <code>gsap.from()</code>. Now it’s time to take
            that to the next level.
          </p>
          <p>
            Challenge yourself to create a card flip animation on hover. A sleek
            and subtle 3D-like rotation that flips the card to reveal its back
            and flips it back when the mouse leaves.
          </p>
          <p>
            You’ll use a combination of <code>gsap.from()</code> and
            <code>gsap.to()</code> to make the flip feel smooth and responsive.
            Feel free to play with the easing, duration, and transform origin to
            find the motion that feels just right.
          </p>
          <p>
            Read more about
            <a
              href="https://greensock.com/docs/v3/GSAP/gsap.to()"
              target="_blank"
              >gsap.to()</a
            >
            and
            <a
              href="https://greensock.com/docs/v3/GSAP/gsap.from()"
              target="_blank"
              >gsap.from()</a
            >
            method.
          </p>
        </section>
      </div>

      <div class="demo">
        <section class="flex-center">
          <div id="card">
            <div class="card-face card-front">I swear I tested it</div>
            <div class="card-face card-back">It works on my machine</div>
          </div>
        </section>
      </div>

      <script type="module" src="script.js"></script>
    </main>
  </body>
</html>
